<!--
 * @Description: 回到顶部
-->
<template>
  <div id="back-top">
    <ul>
        <a-tooltip v-if="this.scanBtnDisplay" :title="$i18n('collaboration.erweima.js')" placement="right">
            <li @click="openScanDialog"> 
                <icon-font type="vp-scan-1" />
                <icon-font class="scan-state-icon" :type="this.scanIconType" :style="this.scanIconColor" />
            </li>
        </a-tooltip>
      <template v-if="isSummary && !hideTop">
      <a-tooltip :title="$i18n('collaboration.title.return.top.js')" placement="right">
        <li @click="backTop"> <icon-font type="sy-setTop" /></li>
      </a-tooltip>
      <a-tooltip :title="$i18n('collaboration.title.return.comment.js')" placement="right">
        <li @click="backOpinionArea"> <icon-font type="sy-comment1" /></li
      ></a-tooltip>
      </template>
    </ul>
  </div>
</template>

<script>
import globalData from '@/plugins/data';
import {initSmartCode} from'./smartCode'
export default {
    name: 'BackTop',
    created() {
        this.isSummary = globalData.isSummary;
        this.scanBtnDisplay=this.pageConfig.templateScanCodeInput;
        if (this.pageConfig.templateScanCodeInput) {
            initSmartCode.call(this,{
                show:this.scanBtnShow,
                connected:this.scanState,
            });
        }
    },
    data(){
      return  {
          scanBtnDisplay:false,
          scanConnect:false,
      }
    },
    computed: {
        scanIconType(){
            return this.scanConnect?'cap-icon-duigou':'cap-icon-disconnect';
        },
        scanIconColor(){
            return {
                backgroundColor:this.scanConnect?'#13D06C':'#f26e72'
            };
        }
    },
    props:{
      hideTop: {
        type: Boolean,
        default: false
      },
     pageConfig:{
       type:Object,
       default:()=> {
           return {
               templateScanCodeInput: false,//控制二维码是否显示 
           }
       }
    }, 
    },        
    methods: {
      //回到顶部
      backTop() {
        document.querySelector('#zwIframe').scrollIntoView({ behavior: 'smooth' });
      },
      //回到意见区
      backOpinionArea() {
        document.querySelector('#opinion-area').scrollIntoView({ behavior: 'smooth' });
      },
      //扫码按钮是否显示  
      scanBtnShow(show) {
          this.scanBtnDisplay = show && true;
      },
      //扫码状态是否可用  
      scanState(success) {
          this.scanConnect = success && true;
      },
      openScanDialog(){
          (window._getZWIframe()?.openScanPort ?? (() => {}))();
      }  
    },
  };
</script>
<style lang="scss" scoped>
  #back-top {
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 9;

    > ul {
      font-size: 18px;
      color: #fff;

      > li {
        @include equalWH(40, 1, 1);

        margin-top: 10px;
        cursor: pointer;
        background-color: #bfbfbf;

        &:hover {
          background-color: #8c8c8c;
        }
      }
    }
    .scan-state-icon{
      position: absolute;
      font-size: 12px;
      height: 18px;
      width: 18px;
      line-height: 20px;
      top: 35px;
      right: 0px;
      color: rgb(255, 255, 255);
      border-radius: 100%;
      text-align: center;
      background-color: #13D06C;
    }
  }
</style>
